<template>
  <div >

        <el-row >
        <el-button
      type="info"
      plain 
      icon="el-icon-circle-plus-outline" 
          @click="handleAdd"
          v-hasPermi="['cmdb:savefile:post']"
        >新增IP地址
        </el-button>  
  <el-select v-model="network_value" filterable placeholder="请选择" @change="network_filter">
    <el-option
      v-for="item in network_options"
      :key="item.id"
      :label="item.address"
      :value="item.address">
            <span style="float: left">{{ item.address }}</span>
      <span style="float: right; color: blue; font-size: 13px">{{ item.ips }}</span>
    </el-option>
  </el-select>
              <el-input
          id="search_input"
          ref="search_input"
          :autofocus="is_focus"
          :trigger-on-focus="false"
          :suffix-icon="search_input_icon"
          @focus="on_focus"
          :fetch-suggestions="history_filter"
          select-when-unmatched
          @keyup.enter.native="on_search()"
          placeholder="示例：(hostname:huawei* AND price:[20000 TO 40000]) 更多请参阅Lucene语法"
          v-model="query"
          style="width: 70%"
        >

          <el-button
            id="submit"
            @click="on_search()"
            slot="append"
            icon="el-icon-search"
            :loading="loading"
          ></el-button>
              </el-input>
    </el-row>
      <el-table
    :data="tableData"
    stripe
    style="width: 100%"
    :header-cell-style="{textAlign: 'center'}"
    :cell-style="{ textAlign: 'center' }"
    >
        <el-table-column
      type="index"
      label="序号"
      width="50">
    </el-table-column>
    <el-table-column
      prop="scope"
      label="IP地址"
      width="260">
                       <template slot-scope="scope">
                         {{scope.row._source.ip}}
            </template>
    </el-table-column>
    <el-table-column
      prop="scope"
      label="MAC地址"
      width="180">
                             <template slot-scope="scope">
                         {{scope.row._source.mac[0]}}
                                       <el-button icon="el-icon-s-marketing" type="text" @click="show_mac_history(scope.row)"></el-button>

            </template>
    </el-table-column>
        <el-table-column
      prop="_source.S-network"
      label="所属网段"
      width="180">
    </el-table-column>
            <el-table-column
      prop="_source.version"
      label="地址版本"
      width="180">
    </el-table-column>
    <el-table-column
      prop="_source.S-creation-time"
      label="上线日期">
    </el-table-column>
  </el-table>


    <!-- 对话框 -->
        <el-dialog
      :title="title"
      width="550px"
      :visible.sync="is_visible"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
          <el-form
        :model="dataform"
        label-width="90px"
        :rules="rules"
        label-position="left"
      >
        <el-form-item
          label="IP地址"
          prop="ip"
        >
                <el-input
        type="text"
        placeholder="请输入内容"
        v-model="dataform.ip"
        maxlength="50"
        show-word-limit
        >
        </el-input>
        </el-form-item>
                <el-form-item
          label="MAC地址"
          prop="mac"
        >
            <el-input
            type="text"
            placeholder="请输入内容"
            v-model="dataform.mac"
            maxlength="50"
            show-word-limit
            >
            </el-input>
        </el-form-item>

      </el-form>

            <center>
      <el-form label-width="0px" style="margin-right: 30px align:center">
      <el-form-item>
        <el-button size="small" style="width: 20%" type="primary" @click="on_submit()">提交</el-button>
        <el-button size="small" style="width: 20%" type="info"  @click="on_close()" >取消</el-button>
      </el-form-item>
    </el-form>
    </center>
    </el-dialog>
    <el-dialog :title="`${dialog_title}历史MAC地址`" :visible.sync="dialogTableVisible">
  <el-table :data="gridData">
    <el-table-column property="_source.S-creation-time" label="上线日期" width="200"></el-table-column>
    <el-table-column property="_source.mac" label="历史MAC地址"></el-table-column>
  </el-table>
</el-dialog>


            <el-pagination
      style="float: right; margin-right: 100px"
      background
      layout="total, prev, pager, next"
      :page-size="queryParams.pageSize"
      :total="total"
      :current-page.sync="queryParams.pageNum"
      @current-change="getList"
    >
    </el-pagination>
  </div>
</template>

<script>
import {listIPMAC, addIPMAC, updateIPMAC,delIPMAC} from "@/api/vadmin/cmdb/ipmac";
import {listNetwork,listNetwork_Filter,listIP_Filter,listMac_Filter} from "@/api/vadmin/cmdb/ipmac";

 export default {
    name: "ipmac",
    data() {
      return {
              is_focus: true,
                    search_input_icon: "el-icon-edit",

        network_value:"全部",
        gridData:[],
        dialog_title:"",
        gridData_title:"MAC",
        dialogTableVisible:false,
        network_options:[],
        query:"",
               tableData: [],
        activeName: 'first',
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        pid:1,
        edit_or_update:0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: undefined,
          type: undefined,
        },
        // 总条数
        total: 0,
        is_visible:false,
        dataform:{},
                rules:{ip:{ required: true, message: '请输入IP地址', trigger: 'blur' },
                mac:{ required: true, message: '请输入MAC地址', trigger: 'blur' },
                     }
      }
    },
    created() {
      this.getNetwork();
              this.getList();

    },
    mounted() {
    },
    methods: {
      getNetwork(){
                      listNetwork(this.queryParams.pageNum,this.queryParams.pageSize).then(response => {
          this.network_options = response.results;

        });
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        console.log("IPMAC地址")
        console.log(this.queryParams)
        listIPMAC({page:this.queryParams.pageNum,page_size:this.queryParams.pageSize,query:this.network_value}).then(response => {
          console.log(response)
          this.tableData = response.msg.hits.hits;
          this.total = response.msg.hits.total;
          this.loading = false;
        });

      },
      /** 上传按钮操作 */
      handleAdd(row) {
        this.edit_or_update=0
        this.dataform={}
        this.is_visible = true;
        this.title = "新增IP地址段";
      },
      on_close(){
          this.is_visible=false;
      },
      on_submit(){
        // 0编辑，1修改
        if (this.edit_or_update==0){
        addIPMAC(this.dataform).then(response=>{
            this.is_visible=false
            this.getList({pid:this.pid})
        })
        }else{
          updateIPMAC(this.dataform.id,{"address":this.dataform.address}).then(response=>{
              this.is_visible=false
              this.getList()
          })  
        }

      },
            one_edit(row){
                this.edit_or_update=1
                this.title="编辑状态"
                this.is_visible=true
        this.dataform=row
      },
      network_filter(){
        console.log(this.network_value)
       listNetwork_Filter({"page":this.queryParams.pageNum,"page_size":this.queryParams.pageSize,"address":this.network_value}).then(response => {
          console.log(response)
          this.tableData = response.msg.hits.hits;
          this.total = response.msg.hits.total;
          this.loading = false;
        });
      },
      history_filter(){
      },
      on_search(){
       listIP_Filter({"page":this.queryParams.pageNum,"page_size":this.queryParams.pageSize,"address":this.network_value,"query":this.query}).then(response => {
          console.log(response)
          this.tableData = response.msg.hits.hits;
          this.total = response.msg.hits.total;
          this.loading = false;
        });
      },
          on_focus(){

    },
    show_mac_history(data){
      this.dialogTableVisible=true
      this.dialog_title=data._source.ip
      console.log(data)
      listMac_Filter({"id":data._id}).then(Response=>{
        this.gridData=Response.msg.hits.hits
        console.log(Response)
      })
    },
    show_ip_history(data){

    },
      /** 删除按钮操作 */
      handleDelete(row) {
        this.$confirm('是否确认删除状态为为"' + row.address + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delIPMAC(row.id);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
      },

    }

  }
</script>

<style scoped>

</style>
